<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <el-table :data="restoreTable">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="文件名称" />
          <el-table-column prop="size" label="文件大小" />
          <el-table-column prop="time" label="创建时间" />
          <el-table-column prop="router" label="所属路径" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text">验证</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-left: 70%; margin-top: 3%">
          <el-button type="primary" size="mini" @click="executeFlag = true"
            >执行时间设置</el-button
          >
          <el-button type="primary" size="mini">立刻执行</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="executeCloses"
      :visible.sync="executeFlag"
      append-to-body
      title="执行时间设置"
      width="400px"
    >
      <el-tooltip
        class="item"
        effect="dark"
        content="何时进行同步"
        placement="top"
      >
        <i
          class="el-icon-question"
          style="font-size: 16px; position: absolute; top: 9%; left: 33%"
        ></i>
      </el-tooltip>
      <el-form :inline="true" label-width="120px">
        <el-form-item label="时间范围">
          <el-select
            v-model="execute"
            placeholder="请选择"
            style="width: 190px"
            clearable
          >
            <el-option v-for="val in executeList" :label="val" :value="val" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="executeCloses">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: "数据库对象",
          children: [
            {
              label: "表",
              children: [
                { label: "af_cluster" },
                { label: "af_database" },
                { label: "af_project" },
                { label: "af_status" },
                { label: "sys_log" },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      restoreTable: [
        {
          name: "file_name",
          size: "14KB",
          time: "2023-08-06 15:23:55",
          router: "/sys/tbl/name",
        },
      ],
      executeFlag: false,
      execute: "",
      executeList: [
        "00点",
        "01点",
        "02点",
        "03点",
        "04点",
        "05点",
        "06点",
        "07点",
        "08点",
        "09点",
        "10点",
        "11点",
        "12点",
        "13点",
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
      ],
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.label == "af_database") {
        this.restoreTable = [
          {
            name: "database",
            size: "14KB",
            time: "2023-08-06 15:23:55",
            router: "/sys/tbl/name",
          },
        ];
      } else if (data.label == "af_project") {
        this.restoreTable = [
          {
            name: "project",
            size: "14KB",
            time: "2023-08-06 15:23:55",
            router: "/sys/tbl/name",
          },
        ];
      } else if (data.label == "af_status") {
        this.restoreTable = [
          {
            name: "status",
            size: "14KB",
            time: "2023-08-06 15:23:55",
            router: "/sys/tbl/name",
          },
        ];
      } else if (data.label == "sys_log") {
        this.restoreTable = [
          {
            name: "log",
            size: "14KB",
            time: "2023-08-06 15:23:55",
            router: "/sys/tbl/name",
          },
        ];
      } else {
        this.restoreTable = [
          {
            name: "cluster",
            size: "14KB",
            time: "2023-08-06 15:23:55",
            router: "/sys/tbl/name",
          },
        ];
      }
    },
    executeCloses() {
      this.executeFlag = false;
    },
  },
};
</script>

<style>
</style>